<template>
  <div class="dialog">
    <el-dialog
      :width="width"
      v-model="isShowDialog"
      @close="canel"
      :title="title"
      :close-on-click-modal="closeOnClickModal"
    >
      <!-- v-loading="isLoading" -->
      <!-- 显示的内容 -->
      <slot name="default"></slot>
      <!-- 底部默认 -->

      <template #footer>
        <slot name="footer">
          <span class="dialog-footer">
            <el-button @click="canel">{{ canelText }}</el-button>
            <el-button :loading="isLoading" type="primary" @click="submit">{{
              confirmText
            }}</el-button>
          </span>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  // model: {
  //   prop: "isShowDialog",
  //   event: "change",
  // },
  props: {
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    isShowDialog: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "50%",
    },
    confirmText: {
      type: String,
      default: "确 定",
    },
    canelText: {
      type: String,
      default: "取 消",
    },
  },
  computed: {},
  methods: {
    canel() {
      this.$emit("update:isShowDialog", false);
    },
    submit() {
      this.$emit("confirm", false);
    },
  },
};
</script>

<style lang="scss" scoped></style>
